<!-- 首页 -->
<template>
	<view class="content">
		<!-- 搜索栏 -->
		<search></search>

		<!-- 轮播图 -->
		<swiper class="RotationChart" autoplay circular indicator-dots skip-hidden-item-layout
			indicator-active-color="#ffffff">
			<swiper-item v-for="(item,index) in RotationChart" :key="index">
				<image :src="item.imageUrl"></image>
			</swiper-item>
		</swiper>

		<!-- 首页图标 -->
		<scroll-view class="navigation" scroll-x enable-flex>
			<view class="navigationItem" v-for="(item,index) in HomeIcon" :key="item.id" @click="topage(item.name)">
				<view>
					<image :src="item.iconUrl"></image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</scroll-view>

		<!-- 推荐歌单 -->
		<view class="RecommendedSongsList">
			<view class="title">
				<text>推荐歌单</text>
				<view @click="to_song_sheet">更多></view>
			</view>
			<scroll-view class="RecommendedSongsList-body" scroll-x enable-flex>
				<view class="RecommendedSongsList-item" v-for="(item,index) in RecommendSongSheet" :key="item.id"
					@click="toSongSheetInfo(item.id)">
					<image :src="item.picUrl">
					</image>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 排行榜 -->
		<view class="RankingList">
			<view class="title">
				<text>排行榜</text>
				<view @click="to_song_Clasificacion">更多></view>
			</view>
			<scroll-view class="Rankingbody" scroll-x="true" enable-flex>
				<view class="Rankingitem" v-for="(item,index) in all_list" :key="item.id">
					<view class="Rankingbody-top" @click="toSongSheetInfo(item.id)">
						<text>{{item.name}} ></text>
					</view>
					<view class="Rankingbody-item"
						v-for="(song_item,song_index) in recommend_song_sheet_info[index]"
						:key="song_item.id" @click="tosong(song_index,index)">
						<image :src="song_item.al.picUrl"></image>
						<text>{{song_index+1}}</text>
						<view>
							<text>{{song_item.name}}</text>
							<text>{{song_item.ar[0].name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				all_list:[],
				recommend_song_sheet_info:[],
			}
		},
		onLoad() {
			// 轮播图
			this.getRotationChart()
			// 首页图标
			this.getHomeIcon()
			// 获取推荐歌单
			this.getRecommendSongSheet(10)
			// 获取所有榜单
			this.GetAllList().then(value => {
				this.all_list = value.slice(0,5)
				for (var i = 0; i < value.slice(0, 5).length; i++) {
					let item = value[i]
					this.GetRecommendSongSheetInfo(item['id']).then(value=>{
						this.recommend_song_sheet_info.push(value.slice(0,3))
					})
				}
			})
		},
		methods: {
			...mapActions('Home', ['getRotationChart', 'getHomeIcon', 'getRecommendSongSheet', 'GetAllList',
				'GetRecommendSongSheetInfo'
			]),
			...mapMutations('search', ['setSearch']),
			...mapMutations('song', ['setSongList']),
			// 跳转到歌单详情页
			toSongSheetInfo(id) {
				uni.navigateTo({
					url: `/pages/SongSheetInfo/index?id=${id}`
				})
			},
			
			// 跳转到歌曲详情页面
			tosong(song_index,index) {
				let RecommendSongSheetInfo = []
				for (var i = 0; i < this.RecommendSongSheetInfo[index].length; i++) {
					let item = this.RecommendSongSheetInfo[index][i]
					RecommendSongSheetInfo.push({
						id: item.id,
					})
				}
				uni.navigateTo({
					url: `/pages/song/song?index=${song_index}`,
					success: () => {
						this.setSongList(RecommendSongSheetInfo)
					}
				})
			},
			
			// 跳转到歌单广场页面
			to_song_sheet(){
				uni.navigateTo({
					url:'/pages/song_sheet/song_sheet'
				})
			},
			
			// 跳转到排行榜页面
			to_song_Clasificacion(){
				uni.navigateTo({
					url:'/pages/song_Clasificacion/song_Clasificacion'
				})
			},
			
			// 首页图标跳转到不同页面
			topage(name){
				if (name==='歌单'){
					this.to_song_sheet()
				}else if (name==='排行榜'){
					this.to_song_Clasificacion()
				}
			}
		},
		computed: {
			...mapState('Home', ['RotationChart', 'HomeIcon', 'RecommendSongSheet', 'AllList', 'RecommendSongSheetInfo'])
		},
		onShow() {
			this.setSearch('')
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;

		// 轮播图
		.RotationChart {
			margin-bottom: 40rpx;

			swiper-item {
				border-radius: 20rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}


		}

		// 首页图标
		.navigation {
			display: flex;
			height: 200rpx;
			border-bottom: 1rpx #141414 solid;

			.navigationItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 50rpx;
				width: 100rpx;

				&>view {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					width: 100rpx;

					&>image {
						background-color: #e03337;
						height: 100%;
						width: 100%;
						border-radius: 50%;
					}
				}

				&>text {
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
				}
			}
		}

		.title {
			width: 100%;
			margin-bottom: 50rpx;

			text {
				color: #ffffff;
			}

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx;
				width: 100rpx;
				height: 50rpx;
				font-size: 22rpx;
				letter-spacing: 5rpx;
				float: right;
				color: #ffffff;
				border-radius: 50rpx;
				border: 1rpx #574d4d solid;
			}
		}

		// 推荐歌单
		.RecommendedSongsList {
			.RecommendedSongsList-body {
				height: 270rpx;
				display: flex;

				.RecommendedSongsList-item {
					width: 200rpx;
					height: 100%;
					margin-right: 30rpx;


					image {
						height: 200rpx;
						width: 200rpx;
						border-radius: 30rpx;
					}

					text {
						display: flex;
						flex-wrap: wrap;
						width: 200rpx;
						color: #fff;
						font-size: 22rpx;
						letter-spacing: 5rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 这里是超出几行省略 */
						overflow: hidden;
					}
				}
			}
		}

		// 排行榜
		.RankingList {
			margin-top: 30rpx;

			.Rankingbody {
				display: flex;
				white-space: nowrap;
				height: 500rpx;

				.Rankingitem {
					background-color: #212121;
					display: inline-block;
					height: 100%;
					margin-right: 30rpx;
					min-width: 600rpx;

					.Rankingbody-top {
						padding-top: 30rpx;
						padding-left: 20rpx;
						margin-bottom: 30rpx;
					}

					.Rankingbody-item {
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						margin-bottom: 20rpx;

						image {
							height: 100rpx;
							width: 100rpx;
							border-radius: 20rpx;
						}

						&>text {
							margin: 0 20rpx;
							font-size: 28rpx;
						}

						view {
							display: flex;
							flex-direction: column;
							width: 65%;

							& text:nth-child(1) {
								font-size: 28rpx;
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
	}
</style>
